<template>
	<div class="system-dept-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-dept-search mb15">
				<el-input size="default" placeholder="请输入学生名称" style="max-width: 180px"> </el-input>
				<el-button size="default" type="primary" class="ml10">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddDept('add')">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增学生
				</el-button> -->

				<!-- <el-button size="default" type="success" class="ml10">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
			
					上传学生信息
				</el-button> -->
				<el-upload ref="upload" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange">
					<template #trigger>
						<el-button type="primary">请选择文件</el-button>
					</template>
				</el-upload>
				<!-- <input class="chose" name="请选择文件" type="file" accept=".xls,.xlsx" /> -->
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" row-key="id" default-expand-all>
				<el-table-column prop="stu_name" label="学生姓名" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="card_id" label="身份证号" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="classroom" label="班级" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="college_name" label="学院" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="seat" label="座位号" show-overflow-tooltip> </el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenAddDept('add')">新增</el-button>
						<el-button size="small" text type="primary" @click="onOpenEditDept('edit', scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- <DeptDialog ref="deptDialogRef" @refresh="getTableData()" /> -->
	</div>
</template>

<script setup lang="ts" name="systemDept">
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import * as XLSX from 'xlsx';
import { useStuApi } from '/@/api/student';

function beforeUpload(file) {
	// 只允许上传 Excel 文件
	const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
	if (!isExcel) {
		alert('只能上传excel文件');
		return false;
	}
}
function handleChange(file) {
	const reader = new FileReader();
	reader.onload = (e) => {
		const data = e.target.result;
		const workbook = XLSX.read(data, { type: 'binary' });
		const sheetName = workbook.SheetNames[0];
		const worksheet = workbook.Sheets[sheetName];
		const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
		const keys = excelData[0]; // 获取键名数组
		const result = []; // 定义结果数组

		for (let i = 1; i < excelData.length; i++) {
			const obj = {}; // 定义空对象
			for (let j = 0; j < keys.length; j++) {
				obj[keys[j]] = excelData[i][j]; // 将键值对添加到对象中
			}
			result.push(obj); // 将对象添加到结果数组中
		}
		dealExcel(result);
	};
	reader.readAsBinaryString(file.raw);
}

function dealExcel(ws: any) {
	let exmap = {
		姓名: 'stu_name',
		身份证号码: 'card_id',
		班级: 'classroom',
		学院: 'college_name',
		座位号: 'seat',
	};
	ws.forEach((sourceObj: any) => {
		Object.keys(sourceObj).map((keys) => {
			let newKey = exmap[keys];
			if (newKey) {
				sourceObj[newKey] = sourceObj[keys];
				delete sourceObj[keys];
			}
		});
		console.log(sourceObj, 'sourceOBJ');
		state.tableData.data.push(sourceObj);
	});
}
// 定义变量内容
const deptDialogRef = ref();
const state = reactive<any>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});
// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	// state.tableData.data = [];
	// state.tableData.data.push(
	// 	{
	// 		stu_name: '赵苗苗',
	// 		card_id: '140724200203170066',
	// 		classroom: '2207A',
	// 		college_name: '人工智能',
	// 		seat: '1-4',
	// 	},
	// 	{
	// 		stu_name: '范筱涵',
	// 		card_id: '140724200203170066',
	// 		classroom: '2207A',
	// 		college_name: '人工智能',
	// 		seat: '1-3',
	// 	}
	// );
	useStuApi()
		.getAllStu()
		.then((res) => {
			console.log(res, 'resssssss');
		});
	state.tableData.total = state.tableData.data.length;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// // 打开新增菜单弹窗
// const onOpenAddDept = (type: string) => {
// 	deptDialogRef.value.openDialog(type);
// };
// // 打开编辑菜单弹窗
// const onOpenEditDept = (type: string, row: DeptTreeType) => {
// 	deptDialogRef.value.openDialog(type, row);
// };
// 删除当前行
const onTabelRowDel = (row: DeptTreeType) => {
	ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			getTableData();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style scoped>
/* .chose {
	background-color: #409eff;
	width: 79px;
	height: 32px;
	border-radius: 5px;
} */
</style>
